<template>
  <div :class="$style.board">
    <el-dialog
      v-model="open"
      class-name="kanBan"
      fullscreen
      :before-close="backStorage"
    >
      <div style="width: 100%; height: 100%; background: rgb(30, 53, 68)">
        <div slot="hander">
          <div style="text-align: center">
            <h1 style="padding-top: 10px; color: rgb(247, 248, 249)">
              换模任务看板
            </h1>
            <p
              style="
                text-align: left;
                color: rgb(247, 248, 249);
                padding-left: 10px;
                font-size: 16px;
              "
            >
              15:00 更新
            </p>
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 50%; height: 80%; padding: 10px">
            <!-- 夜班 -->
            <el-table
              border
              :data="leftDataShow"
              v-loading="loading"
              :row-style="iRowStyle"
              :row-class-name="tableRowClassName"
              :cell-style="iCellStyle"
              :cell-class-name="tableRowClassNameC"
              :header-row-style="iHeaderRowStyle"
              :header-cell-style="iHeaderCellStyle"
            >
              <el-table-column :label="ybTime + ' 夜班'">
                <el-table-column
                  label="序号"
                  type="index"
                  width="60"
                  align="center"
                />
                <el-table-column
                  label="机台"
                  align="center"
                  width="100"
                  prop="cmtJtbh"
                >
                  <template v-slot="scope">
                    <el-select
                      :disabled="disabled"
                      @change="(e) => queryClick(e, scope)"
                      size="mini"
                      placeholder=""
                      value-key="cmtJtbh"
                      v-model="scope.row.cmtJtbh"
                    >
                      <el-option
                        v-for="dict of machineList"
                        :label="dict.cmtJtbh"
                        :value="dict.cmtJtbh"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="在产产品编号"
                  :show-overflow-tooltip="true"
                  prop="cmtZccpbh"
                />
                <el-table-column
                  label="换模产品编号"
                  :show-overflow-tooltip="true"
                  width="150"
                  align="center"
                  prop="cmtHmcpbh"
                >
                  <template v-slot="scope">
                    <el-select
                      :disabled="disabled"
                      @change="(e) => selectLeftClick(e, scope.row)"
                      placeholder=""
                      size="mini"
                      value-key="cmtHmcpbh"
                      v-model="scope.row.cmtHmcpbh"
                    >
                      <el-option
                        v-for="dict in scope.row.params"
                        :key="dict.cmtHmcpbh"
                        :label="dict.cmtHmcpbh"
                        :value="dict"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="换模编号"
                  :show-overflow-tooltip="true"
                  width="200"
                  align="center"
                  prop="cmtHmmjbh"
                />
                <el-table-column
                  label="预计生产数"
                  min-width="15"
                  align="center"
                  width="115"
                  prop="cmtYjscs"
                />
                <el-table-column
                  label="完成状态"
                  min-width="15"
                  align="center"
                  width="100"
                  prop="cmtZtbz"
                >
                  <template v-slot="scope">
                    <span v-if="scope.row.cmtZtbz == 1">待进行</span>
                    <span v-else-if="scope.row.cmtZtbz == 2">进行中</span>
                    <span v-else-if="scope.row.cmtZtbz == 3">已完成</span>
                    <span v-else>{{ scope.row.cmtZtbz }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div style="width: 50%; height: 80%; padding: 10px">
            <!-- 白班 -->
            <el-table
              highlight-current-row
              border
              :data="rightDataShow"
              v-loading="loading"
              :row-style="iRowStyle"
              :row-class-name="tableRowClassName"
              :cell-style="iCellStyle"
              :cell-class-name="tableRowClassNameC"
              :header-row-style="iHeaderRowStyle"
              :header-cell-style="iHeaderCellStyle"
            >
              <el-table-column :label="bbTime + ' 白班'">
                <el-table-column
                  label="序号"
                  type="index"
                  width="60"
                  align="center"
                />
                <el-table-column
                  label="机台"
                  width="100"
                  align="center"
                  prop="cmtJtbh"
                >
                  <template v-slot="scope">
                    <el-select
                      :disabled="disabled"
                      @change="(e) => queryClick(e, scope)"
                      placeholder=""
                      size="mini"
                      v-model="scope.row.cmtJtbh"
                    >
                      <el-option
                        v-for="dict of machineList"
                        :label="dict.cmtJtbh"
                        :value="dict.cmtJtbh"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="在产产品编号"
                  :show-overflow-tooltip="true"
                  prop="cmtZccpbh"
                />
                <el-table-column
                  label="换模产品编号"
                  :show-overflow-tooltip="true"
                  width="150"
                  align="center"
                  prop="cmtHmcpbh"
                >
                  <template v-slot="scope">
                    <el-select
                      :disabled="disabled"
                      @change="(e) => selectRightClick(e, scope.row)"
                      placeholder=""
                      size="mini"
                      value-key="cmtHmcpbh"
                      v-model="scope.row.cmtHmcpbh"
                    >
                      <el-option
                        v-for="dict in scope.row.params"
                        :label="dict.cmtHmcpbh"
                        :value="dict"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="换模编号"
                  :show-overflow-tooltip="true"
                  width="200"
                  align="center"
                  prop="cmtHmmjbh"
                />
                <el-table-column
                  label="预计生产数"
                  min-width="15"
                  align="center"
                  width="115"
                  prop="cmtYjscs"
                />
                <el-table-column
                  label="完成状态"
                  min-width="15"
                  align="center"
                  width="100"
                  prop="cmtZtbz"
                >
                  <template v-slot="scope">
                    <span v-if="scope.row.cmtZtbz == 1">待进行</span>
                    <span v-else-if="scope.row.cmtZtbz == 2">进行中</span>
                    <span v-else-if="scope.row.cmtZtbz == 3">已完成</span>
                    <span v-else>{{ scope.row.cmtZtbz }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BoardService from "@/api/board/board";

export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      open: true,
      disabled: !this.$route.query.select,
      // 导出遮罩层
      exportLoading: false,
      now_data: {},
      excel_disable: true,
      total: 1,
      page: 1,
      leftDataShow: [],
      timer: null,
      ybTime: this.$moment().format("YYYY-MM-DD"),
      bbTime: this.$moment().add(1, "days").format("YYYY-MM-DD"),
      rightDataShow: [],
      machineList: [],
      queryLeftParams: {
        cmtJtbh: null,
        cmtHmcpbh: null,
        cmtHmmjbh: null,
        cmtDesc: "YB",
      },
      queryRightParams: {
        cmtJtbh: null,
        cmtHmcpbh: null,
        cmtHmmjbh: null,
        cmtDesc: "BB",
      },
      leftArray: ["array"],
      rightArray: ["array"],
      ztzbOption: [
        {
          value: 1,
          label: "待进行",
        },
        {
          value: 2,
          label: "进行中",
        },
        {
          value: 3,
          label: "已完成",
        },
      ],
    };
  },
  created() {
    this.get_info();
    if (this.timer) clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.get_info();
    }, 120000);
  },
  destroyed() {
    clearInterval(this.intver);
    clearInterval(this.timer);
  },
  methods: {
    get_info() {
      BoardService.getChangeTaskBoard().then((res) => {
        let tmpObj = {
          cmtJtbh: null,
          cmtZccpbh: null,
          cmtHmmjbh: null,
          cmtScsl: null,
        };
        this.machineList = res.allList;
        this.bbTime = res.bbTime;
        this.ybTime = res.ybTime;
        this.leftDataShow = res.ybList.map((y) => {
          const obj = this.machineList.filter((a) => a.cmtJtbh === y.cmtJtbh);
          y.params = Object.assign({}, obj[0].materialsAndMoldList);
          y.cmtYjscs = obj[0].cmtYjscs;
          return y;
        });

        for (let i = 10 - this.leftDataShow.length; i > 0; i--) {
          this.leftDataShow.push(Object.assign({}, tmpObj));
        }

        this.rightDataShow = res.bbList.map((y) => {
          const obj = this.machineList.filter((a) => a.cmtJtbh === y.cmtJtbh);
          y.params = obj[0].materialsAndMoldList;
          y.cmtYjscs = obj[0].cmtYjscs;
          return y;
        });
        for (let i = 10 - this.rightDataShow.length; i > 0; i--) {
          this.rightDataShow.push(Object.assign({}, tmpObj));
        }
      });
    },
    tableRowClassName({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    },
    tableRowClassNameC({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "success-cell";
      }
      return "";
    },
    iRowStyle: function ({ row, column, rowIndex, columnIndex }) {
      return "height:10px;";
    },
    iHeaderRowStyle: function ({ row, column, rowIndex, columnIndex }) {
      return "height:3px;";
    },
    iCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      return "padding:6px 0;color:rgb(247,248,249);font-size:18px;height:50px";
    },
    iHeaderCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      return "padding:0px;text-align:center;background:rgb(2,81,95);color:rgb(247,248,249);height:40px;font-size:18px";
    },
    selectLeftClick(opi, row) {
      BoardService.updateChangeTaskBoard({
        cmtId: row.cmtId,
        cmtBc: "YB",
        ...opi,
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("更新换模产品成功!");
        } else {
          this.$message.error("更新失败，更新条目：" + res.msg);
        }
      });
    },
    selectRightClick(opi, row) {
      BoardService.updateChangeTaskBoard({
        cmtId: row.cmtId,
        cmtBc: "BB",
        ...opi,
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("更新换模产品成功!");
        } else {
          this.$message.error("更新失败，更新条目：" + res.msg);
        }
      });
    },
    queryClick(row, i) {
      const obj = this.machineList.filter((a) => a.cmtJtbh === row);
      i.row.cmtZccpbh = obj[0].cmtZccpbh;
      i.row.cmtHmmjbh = obj[0].cmtHmmjbh;
      i.row.cmtYjscs = obj[0].cmtYjscs;
      i.row.params = obj[0].materialsAndMoldList;
    },
    backStorage() {
      // 返回上级路由并关闭当前路由
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      );
      this.$router.push({ path: "/index" });
    },
  },
};
</script>
<style lang="scss" module>
@use "./board.scss";
.board {
  :global {
    .warning-row {
      background: #0e53de;
    }
    .success-row {
      background: rgb(30, 53, 68);
    }
    .success-row {
      background: rgb(30, 53, 68);
    }
    .el-table__empty-text {
      background: rgb(30, 53, 68);
      width: 100%;
    }
    .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: rgba(0, 0, 0, 0) !important;
    }
    .el-table .cell {
      height: auto;
      .el-input__inner {
        font-size: 16px;
        color: black;
      }
    }
  }
}
</style>
